{% extends "layouts/examples.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/table/macro.njk" import govukTable %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">

      <h1 class="govuk-heading-xl">
        Typography
      </h1>

      <!-- Headings -->

      <section>
        <div>
          <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Headings</h2>
        </div>
        <div>
        <h1 class="govuk-heading-xl">govuk-heading-xl</h1>
        </div>
        <div>
          <h2 class="govuk-heading-l">govuk-heading-l</h2>
        </div>
        <div>
          <h3 class="govuk-heading-m">govuk-heading-m</h3>
        </div>
        <div>
          <h4 class="govuk-heading-s">govuk-heading-s</h4>
        </div>
      </section>

      <!-- Headings with captions -->

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Captions before headings</h2>
        <div>
          <span class="govuk-caption-xl">govuk-caption-xl</span>
          <h1 class="govuk-heading-xl">govuk-heading-xl</h1>
        </div>
        <div>
          <span class="govuk-caption-l">govuk-caption-l</span>
          <h2 class="govuk-heading-l">govuk-heading-l</h2>
        </div>
        <div>
          <span class="govuk-caption-m">govuk-caption-m</span>
          <h3 class="govuk-heading-m">govuk-heading-m</h3>
        </div>
      </section>

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Captions inside headings</h2>
        <div>
          <h1 class="govuk-heading-xl">
            <span class="govuk-caption-xl">govuk-caption-xl</span>
            govuk-heading-xl
          </h1>
        </div>
        <div>
          <h2 class="govuk-heading-l">
            <span class="govuk-caption-l">govuk-caption-l</span>
            govuk-heading-l
          </h2>
        </div>
        <div>
          <h3 class="govuk-heading-m">
            <span class="govuk-caption-m">govuk-caption-m</span>
            govuk-heading-m
          </h3>
        </div>
      </section>

      <!-- Body text -->

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Body text</h2>
        <div>
          <p class="govuk-body-l">govuk-body-l</p>
        </div>
        <div>
          <p class="govuk-body-m">govuk-body / govuk-body-m</p>
        </div>
        <div>
          <p class="govuk-body-s">govuk-body-s</p>
        </div>
      </section>

      <!-- Overrides -->

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Overrides</h2>

        <h3 class="govuk-heading-m">Override font-size and line-height</h3>

        <!-- We have to add govuk-body to get new transport, but then we get
          margins, so we have to remove them -->

        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-80">govuk-!-font-size-80</p>
        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-48">govuk-!-font-size-48</p>
        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-36">govuk-!-font-size-36</p>
        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-27">govuk-!-font-size-27</p>
        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-24">govuk-!-font-size-24</p>
        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-19">govuk-!-font-size-19</p>
        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-16">govuk-!-font-size-16</p>

        <h3 class="govuk-heading-m govuk-!-margin-top-9">Override font weight.</h3>

        <p class="govuk-body govuk-!-margin-0 govuk-!-font-weight-regular">govuk-!-font-weight-regular</p>
        <p class="govuk-body govuk-!-margin-0 govuk-!-font-weight-bold">govuk-!-font-weight-bold</p>


        <h3 class="govuk-heading-m govuk-!-margin-top-9">Override both by combining classes</h3>

        <p class="govuk-body govuk-!-margin-0 govuk-!-font-size-48 govuk-!-font-weight-bold">govuk-!-font-size-48 + govuk-!-font-weight-bold</p>

        <h3 class="govuk-heading-m govuk-!-margin-top-9">Override typography classes</h3>

        <h1 class="govuk-heading-xl govuk-!-font-size-80">govuk-heading-xl + govuk-!-font-size-80</h1>

        <h2 class="govuk-heading-xl govuk-!-font-weight-regular">govuk-heading-xl + govuk-!-font-weight-regular</h2>

        <p class="govuk-body-l govuk-!-font-weight-bold">govuk-body-l + govuk-!-font-weight-bold</p>

      </section>
      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Lists</h2>
        <h3 class="govuk-heading-m">govuk-list</h3>
        <ul class="govuk-list">
          <li>
            <a href="#" class="govuk-link">Benefits calculators</a>
          </li>
          <li>
            <a href="#" class="govuk-link">Benefit overpayments</a>
          </li>
          <li>
            <a href="#" class="govuk-link">Benefit fraud</a>
          </li>
          <li>
            <a href="#" class="govuk-link">More</a>
          </li>
        </ul>
        <h3 class="govuk-heading-m">govuk-list + govuk-list--bullet</h3>
        <ul class="govuk-list govuk-list--bullet">
          <li>Apples</li>
          <li>Oranges</li>
          <li>Pears</li>
        </ul>
        <h3 class="govuk-heading-m">govuk-list + govuk-list--number</h3>
        <ol class="govuk-list govuk-list--number">
          <li>Delivery address</li>
          <li>Payment</li>
          <li>Confirmation</li>
        </ol>
        <h3 class="govuk-heading-m">Nested govuk-list 1</h3>
        <ul class="govuk-list govuk-list--number">
          <li><a class="govuk-link" href="#">Download kit</a></li>
          <li>
            <a class="govuk-link" href="#">Simple install guide</a>
            <ol class="govuk-list govuk-list--number">
              <li>
                <a class="govuk-link" href="#">Kit requirements</a>
                <ul class="govuk-list govuk-list--bullet">
                  <li>Node.js</li>
                  <li>Web browser</li>
                </ul>
              </li>
              <li>
                <a class="govuk-link" href="#">Install the kit</a>
              </li>
              <li>
              <a class="govuk-link" href="#">Run the kit</a>
              </li>
            </ol>
          </li>
          <li><a class="govuk-link" href="#">Advanced install guide</a></li>
        </ul>
        <h3 class="govuk-heading-m">Nested govuk-list 1</h3>
        <ul class="govuk-list govuk-list--bullet">
          <li>Fruits
            <ul class="govuk-list govuk-list--bullet">
              <li>Apples
                <ul class="govuk-list govuk-list--bullet">
                  <li>Granny Smith</li>
                  <li>Gala</li>
                </ul>
              </li>
              <li>Oranges</li>
            </ul>
          </li>
          <li>Vegetables</li>
        </ul>
        <h3 class="govuk-heading-m">govuk-list + govuk-list--spaced</h3>
        <p class="govuk-body">You’re extremely vulnerable if you:</p>
        <ul class="govuk-list govuk-list--bullet govuk-list--spaced">
          <li>have had a solid organ transplant</li>
          <li>have any cancer and are getting chemotherapy</li>
          <li>have lung cancer and are getting radical radiotherapy</li>
          <li>have cancer of the blood or bone marrow, at any stage of treatment - for example, leukaemia, lymphoma or myeloma</li>
          <li>have any cancer for which you’re getting immunotherapy or other continuing antibody treatments</li>
          <li>have any cancer for which you’re getting a targeted treatment which can affect the immune system - for example, protein kinase inhibitors or PARP inhibitors</li>
          <li>have had bone marrow or stem cell transplants in the last 6 months, or are still taking immunosuppression drugs</li>
          <li>have a severe respiratory condition - including cystic fibrosis, severe asthma or severe COPD (Chronic Obstructive Pulmonary Disease)</li>
          <li>have a rare disease or inborn error of metabolism that significantly increases your risk of infection - for example SCID or homozygous sickle cell</li>
          <li>are getting an immunosuppression therapy that’s sufficient to significantly increase your risk of infection</li>
          <li>are pregnant, and have a significant congenital or acquired heart disease</li>
        </ul>
      </section>

      <!-- Body text -->

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Links</h2>
        <div>
          <p class="govuk-body">
            <a href="#" class="govuk-link">govuk-link</a>
          </p>
        </div>
        <div>
          <p class="govuk-body">
            <a href="#" class="govuk-link govuk-link--muted">govuk-link govuk-link--muted</a>
          </p>
        </div>
      </section>

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Example content 1</h2>

        <h1 class="govuk-heading-xl">Request information about a vehicle or its registered keeper from DVLA</h1>

        <p class="govuk-body-l">You can ask DVLA for information about your vehicle or another vehicle and its registered keeper if you have a ‘reasonable cause’.</p>

        <h2 class="govuk-heading-l">Information about another vehicle or its registered keeper</h2>

        <p class="govuk-body-m">You can ask for details of another vehicle’s registered keeper. You’ll need a ‘reasonable cause’, for example:</p>

        <ul class="govuk-list govuk-list--bullet">
          <li>finding out who was responsible for an accident</li>
          <li>tracing the registered keeper of an abandoned vehicle</li>
          <li>tracing the registered keeper of a vehicle parked on private land</li>
          <li>giving out parking tickets</li>
          <li>giving out trespass charge notices</li>
          <li>tracing people responsible for driving off without paying for goods and services</li>
          <li>tracing people suspected of insurance fraud</li>
        </ul>

        <p class="govuk-body-m">Private car parking management companies that give out parking tickets or trespass charge notices can only request information from <abbr title="Driver and Vehicle Licensing Agency">DVLA</abbr> if they’re members of the <a rel="external" href="http://www.britishparking.co.uk" class="govuk-link">British Parking Association</a> or the <a rel="external" href="http://www.theipc.info" class="govuk-link">International Parking Community.</a></p>


        <h3 class="govuk-heading-s">How to make a request</h3>
        <p class="govuk-body-m">Fill in a form and apply by post. The form you need to use depends on who is making the request and why.</p>

        <p class="govuk-body-m">Details of how to pay and where to send your application are on each form.</p>

        {{ govukTable({
          "classes": "govuk-!-font-size-16",
          "head": [
            {
              "text": "Who is making the request"
            },
            {
              "text": "Form"
            }
          ],
          "rows": [
            [
              {
                "text": "An individual"
              },
              {
                "html": "<a href=\"/government/publications/v888-request-by-an-individual-for-information-about-a-vehicle\" class=\"govuk-link\">Form V888</a>"
              }
            ],
            [
              {
                "text": "A company"
              },
              {
                "html": "<a href=\"/government/publications/v8882-request-by-a-company-for-information-about-a-vehicle\" class=\"govuk-link\">Form V8882</a>"
              }
            ],
            [
              {
                "text": "A company that issues parking or trespass charge notices"
              },
              {
                "html": "<a href=\"/government/publications/v8883-request-for-information-for-those-who-issue-a-parking-charge-notice\" class=\"govuk-link\">Form V8883</a>"
              }
            ]
          ]
        }) }}

        <p class="govuk-body-m">You can download further information on <a href="/government/publications/giving-people-information-from-our-vehicle-record" class="govuk-link">requesting information from <abbr title="Driver and Vehicle Licensing Agency">DVLA</abbr></a>.</p>

        <h3 class="govuk-heading-m">Information about you or your vehicle</h3>
        <p class="govuk-body-m">You can ask for information about your current vehicle or a vehicle that used to be registered in your name.</p>

        <p class="govuk-body-m">It doesn’t cost anything.</p>

        <p class="govuk-body-m">You’ll need to include:</p>

        <ul class="govuk-list govuk-list--bullet">
          <li>your full name</li>
          <li>your current address and the address on your log book (V5C)</li>
          <li>the registration number of the vehicle you’re asking about</li>
          <li>what information you need, for example when the vehicle was first registered or the date you bought it</li>
        </ul>

        <p class="govuk-body-m">You can send your request to DVLA by email or post.</p>

        <p class="govuk-body-m"><strong><abbr title="Driver and Vehicle Licensing Agency">DVLA</abbr> SAR Enquiries</strong><br><a href="mailto:SubjectAccess.Requests@dvla.gsi.gov.uk" class="govuk-link">SubjectAccess.Requests@dvla.gsi.gov.uk</a></p>

        <p class="govuk-body-m">
          SAR Enquiries
          <br>DVRE
          <br><abbr title="Driver and Vehicle Licensing Agency">DVLA</abbr>
          <br>Swansea
          <br>SA99 1ZZ
          <br>
        </p>

        <p class="govuk-body-m">Don’t use these details for general enquiries - contact DVLA instead.</p>
      </section>

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Example content 2</h2>

        <h1 class="govuk-heading-xl">Apply for a Women’s Land Army or Women’s Timber Corps veterans badge</h1>

        <p class="govuk-body-l">You can get the veterans badge if you are a veteran of either the Women’s Land Army (<abbr title="Women's Land Army">WLA</abbr>) or the Women’s Timber Corps (<abbr title="Women's Timber Corps">WTC</abbr>).</p>

        <h2 class="govuk-heading-l">Eligibility</h2>

        <p class="govuk-body-m">You’ll get the badge if you served during World War 1 or World War 2, or at any time up until the corps were disbanded in 1950.</p>

        <p class="govuk-body-m">You can apply for a badge if you are the spouse or family member of a deceased veteran, but only if they died after 6 December 2007 (when the badge was issued).</p>

        <h2 class="govuk-heading-l">How to apply</h2>

        <p class="govuk-body-m">Fill in the <a href="/government/publications/women-s-land-army-and-timber-corps-veterans-badge-application-form" class="govuk-link"><abbr title="Women's Land Army">WLA</abbr> and <abbr title="Women's Timber Corps">WTC</abbr> veterans badge application form.</a></p>

        <p class="govuk-body-m">You’ll need to give your date of birth, approximate dates of service in the <abbr title="Women's Land Army">WLA</abbr> or <abbr title="Women's Timber Corps">WTC</abbr>, and the location at which you (or your family member or spouse) were stationed.</p>

        <p class="govuk-body-m">Send your form by email or post to Department for Environment, Food and Rural Affairs (<abbr title="Department for Environment, Food and Rural Affairs">Defra</abbr>).</p>


        <p class="govuk-body-m"><strong><abbr title="Department for Environment, Food and Rural Affairs">Defra</abbr></strong>
        <a href="mailto:womenslandarmy@defra.gsi.gov.uk" class="govuk-link">womenslandarmy@defra.gsi.gov.uk</a><br>
        Telephone: 0208 026 3078<br>
        <a href="/call-charges" class="govuk-link">Find out about call charges</a></p>


        <p class="govuk-body-m">

        Women’s Land Army Team
        <br>Department for Environment, Food and Rural Affairs
        <br>Area 1A
        <br>Nobel House
        <br>17 Smith Square
        <br>London
        <br>SW1P 3JR
        <br>
        </p>

        <h2 class="govuk-heading-l">After you’ve applied</h2>

        <p class="govuk-body-m">You’ll receive your badge within 4 weeks or you’ll be contacted if you need to provide more information.</p>
      </section>

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Adjacent siblings</h2>

        <p class="govuk-body-l">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>

        <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>

        <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>

        <h3 class="govuk-heading-m">govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m</h3>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>

        <h4 class="govuk-heading-s">govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s</h4>

        <ul class="govuk-list govuk-list--bullet">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>

        <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>

        <ul class="govuk-list govuk-list--bullet">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>

        <h3 class="govuk-heading-m">govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m</h3>

        <ul class="govuk-list govuk-list--bullet">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>

        <h4 class="govuk-heading-s">govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s</h4>


        <ol class="govuk-list govuk-list--number">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ol>

        <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>

        <ol class="govuk-list govuk-list--number">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ol>

        <h3 class="govuk-heading-m">govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m</h3>

        <ol class="govuk-list govuk-list--number">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ol>

        <h4 class="govuk-heading-s">govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s</h4>

      </section>

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Section breaks - Not-visible</h2>

        <h2 class="govuk-heading-l">Topic A1</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <h2 class="govuk-heading-l">Topic A2</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <hr class="govuk-section-break govuk-section-break--xl">

        <h2 class="govuk-heading-l">Topic B (govuk-section-break--xl above)</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <hr class="govuk-section-break govuk-section-break--l">

        <h2 class="govuk-heading-l">Topic C (govuk-section-break--l above)</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <hr class="govuk-section-break govuk-section-break--m">

        <h2 class="govuk-heading-l">Topic D (govuk-section-break--m above)</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

      </section>

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Section breaks - Visible</h2>

        <h2 class="govuk-heading-l">Topic A1</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <h2 class="govuk-heading-l">Topic A2</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--xl">

        <h2 class="govuk-heading-l">Topic B (govuk-section-break--xl above)</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">

        <h2 class="govuk-heading-l">Topic C (govuk-section-break--l above)</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">

        <h2 class="govuk-heading-l">Topic D (govuk-section-break--m above)</h2>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

        <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body</p>

      </section>

      <section class="govuk-!-margin-top-8">
        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Visually hidden text</h2>

        <h3 class="govuk-heading-m">Heading with visually hidden text at the beginning</h3>

        <h4 class="govuk-heading-s"><span class="govuk-visually-hidden">Countries starting with </span>A</h4>

        <h3 class="govuk-heading-m">Heading with visually hidden text at the end</h3>

        <h4 class="govuk-heading-s">Search <span class="govuk-visually-hidden">all content</span></h4>

        <h3 class="govuk-heading-m">Heading that is visually hidden</h3>

        <h4 class="govuk-visually-hidden">Navigation menu</h4>

        <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--xl">

        <h3 class="govuk-heading-m">Paragraph that contains visually hidden text</h3>

        <p class="govuk-body">This is a paragraph <span class="govuk-visually-hidden">with some visually hidden text</span>.</p>

        <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--xl">

        <h3 class="govuk-heading-m">Table with visually hidden text</h3>

        {{ govukTable({
          caption: "2019",
          captionClasses: "govuk-!-margin-bottom-4",
          head: [
            {
              text: "Date",
              classes: "govuk-visually-hidden"
            },
            {
              text: "Day",
              classes: "govuk-visually-hidden"
            },
            {
              text: "Name",
              classes: "govuk-visually-hidden"
            }
          ],
          rows: [
            [
              {
                text: "19 April"
              },
              {
                text: "Friday"
              },
              {
                text: "Good Friday"
              }
            ],
            [
              {
                text: "22 April"
              },
              {
                text: "Monday"
              },
              {
                text: "Easter Monday"
              }
            ]
          ]
        }) }}
      </section>
    </div>
  </div>
{% endblock %}
